<template>
    <div class="container container-talent">
        <a-spin tip="Loading..." :spinning="loading">
            <div class="page-top">
                <a-carousel autoplay arrows draggable>
                    <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
                        <a-icon type="left-circle" />
                    </div>
                    <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
                        <a-icon type="right-circle" />
                    </div>
                    <div class="index-bgbox" v-for="item in bannerList">
                        <img class="page-top-bg" :src="item" />

                    </div>
                </a-carousel>
                <div class="page-top-panel">
                    <div class="page-top-title">专家库</div>
                    <div class="top-input-box">
                        <input class="top-input" v-model="keywords" type="text" placeholder="输入您想查找的专家…" @keyup.enter="resetList">
                        <a-icon class="top-input-ico" type="search" @click="resetList" />
                    </div>
                </div>
            </div>
            <div class="page-content">
                <div class="type-panel">
                    <span class="type-list" :class="pageType==='专家'&&'type-list-sel'" @click="pageTypeChange('专家')">专家</span>
                    <span class="type-list" :class="pageType==='专家团队'&&'type-list-sel'"
                        @click="pageTypeChange('专家团队')">专家团队</span>
                    <span class="type-list" :class="pageType===''&&'type-list-sel'" @click="pageTypeChange('')">技术经纪人</span>
                </div>
                <div class="search-panel">
                    <div class="search-top">
                        <div class="search-switch" @click="searchShow=!searchShow">
                            <a-icon type="filter" />
                            <span>筛选列表</span>
                            <a-icon type="caret-down" />
                        </div>
                        <a-button type="primary" class="search-top-btn" @click="resetList">搜索</a-button>
                    </div>

                    <div class="search-main" :class="searchShow &&'search-main-show'">
                        <template v-if="pageType!==''">
                            <div class="search-row">
                                <div class="search-title">所属学院</div>
                                <a-checkbox-group v-model="pageParams.placeCollegeStr" @change="searchChange('placeCollegeStr')">
                                    <a-checkbox :value="item.content" v-for="item in placeCollegeList"
                                        :key="item.id">{{item.content}}</a-checkbox>
                                </a-checkbox-group>
                            </div>
                            <div class="search-row">
                                <div class="search-title">细分领域</div>
                                <a-checkbox-group v-model="pageParams.territoryStr" @change="searchChange('territoryStr')">
                                    <a-checkbox :value="item.content" v-for="item in territoryList"
                                        :key="item.id">{{item.content}}</a-checkbox>
                                </a-checkbox-group>
                            </div>
                        </template>

                        <div class="search-row" v-else>
                            <div class="search-title">能力等级</div>
                            <a-checkbox-group v-model="pageParams.capabilityLevel" @change="searchChange('capabilityLevel')">
                                <a-checkbox value="初级技术经纪人">初级技术经纪人</a-checkbox>
                                <a-checkbox value="中级技术经纪人">中级技术经纪人</a-checkbox>
                                <a-checkbox value="高级技术经纪人">高级技术经纪人</a-checkbox>
                            </a-checkbox-group>
                        </div>
                        <div class="search-action" @click="searchShow=!searchShow">
                            <span>收起</span>
                            <a-icon type="double-left" />
                        </div>
                    </div>
                </div>
                <div v-if="pageList.length>0">
                    <template v-for="item in pageList">
                        <PageListVue :listInfo="item" :key="item.id" :pageType="pageType" />
                    </template>
                </div>
                <div class="page-content" v-else>
                    <div class="list-null">
                        <div class="iconfont">&#xe642;</div>
                        <div>暂无数据</div>
                    </div>

                </div>
                <div style="text-align:right">
                    <a-pagination v-model="pageNum" :pageSize="pageSize" :total="total" show-less-items @change="pageChange" />
                </div>

            </div>
        </a-spin>
    </div>
</template>

<script lang="ts">
import api from "@/api/api";
import { Vue, Component } from "vue-property-decorator";
import PageListVue from "./components/pageList.vue";
@Component({
    name: "dom",
    components: { PageListVue },
})
export default class index extends Vue {
    pageNum = 1;
    total = 0;
    pageSize = 9;
    pageList = [];
    loading = false;
    pageType = "专家";
    keywords = "";
    searchShow = false;
    pageParams = {};
    async mounted() {
        const query = this.$route.query;
        const type = query.type ? query.type + "" : "";
        if (type === "技术经纪人") {
            this.pageType = "";
        }

        this.loading = true;
        Promise.all([this.getTerritoryList(), this.getPlaceCollegeList(), this.getBanner()]).then(() => {
            this.loading = false;
            this.getList();
        });
    }
    async getList() {
        this.pageList = [];
        this.loading = true;
        try {
            const pageParamsStr = {};
            for (let i in this.pageParams) {
                if (this.pageParams[i] && typeof this.pageParams[i] === "object") {
                    pageParamsStr[i] = this.pageParams[i].join(",");
                } else {
                    pageParamsStr[i] = this.pageParams[i];
                }
            }
            const res = await api.findTalentPoolMessage({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                name: this.keywords,
                userType: this.pageType,
                hasTechnicalRepresentative: this.pageType === "" ? 1 : null,
                ...pageParamsStr,
            });
            this.pageList = res.data?.rows || [];
            this.total = res.data?.total || 0;
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pageNum = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pageSize = pageSize;
        this.pageNum = page;
        this.getList();
    }
    pageTypeChange(type) {
        this.pageType = type;
        this.pageParams = {};
        this.resetList();
    }

    bannerList = [""];
    async getBanner() {
        this.pageList = [];

        try {
            const res = await api.getBannerList({
                pageTable: "人才库banner",
            });

            const rows = res.data?.rows || [];
            const pictures = rows[0]?.pictures || "";
            this.bannerList = pictures ? JSON.parse(pictures) : [""];
        } finally {
            // this.loading = false;
        }
    }

    territoryList = [];
    async getTerritoryList() {
        try {
            const res = await api.getSetting("3");
            this.territoryList = res.data;
        } finally {
            //
        }
    }

    placeCollegeList = [];
    async getPlaceCollegeList() {
        try {
            const res = await api.getSetting("1");
            this.placeCollegeList = res.data;
        } finally {
            //
        }
    }
    searchChange(type) {
        const one = this.pageParams[type];
        if (one && one.length > 1) {
            this.pageParams[type] = [one[one.length - 1]];
        }
        this.resetList();
    }
}
</script>

<style lang="scss">
.container-talent {
    .page-top {
        position: relative;
    }
    .index-bgbox {
        min-height: 330px;
    }
    .page-top-bg {
        width: 100%;
    }
    .page-top-panel {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        padding-top: 8%;
        padding-left: 10%;
    }
    .page-top-title {
        font-weight: bold;
        font-size: 45px;
        color: #132042;
    }

    .top-input-box {
        width: 620px;
        box-shadow: 0px 10px 12px 0px rgba(47, 101, 243, 0.2);
        height: 60px;
        background-color: #fff;
        display: flex;
        align-items: center;
        border-radius: 100px;
        margin-top: 30px;
    }
    .top-input {
        font-weight: bold;
        font-size: 18px;
        height: 100%;
        border: unset;
        background-color: transparent;
        padding: 0 40px;
        flex-grow: 1;
        outline: unset;
    }
    .top-input-ico {
        display: block;
        width: 140px;
        background: #2f65f3;
        color: #ffffff;
        height: 100%;
        font-size: 30px;
        border-radius: 0 100px 100px 0;
        line-height: 65px;
        cursor: pointer;
        font-weight: bold;
    }

    .page-content {
        padding: 50px 0;
        display: block;
        margin: 0 auto;
        width: 1260px;
    }
    .type-panel {
        border-bottom: solid 1px #eee;
        background-color: #fff;
        margin-bottom: 20px;
        border-radius: 4px;
    }
    .type-list {
        font-size: 18px;
        border-bottom: solid 3px transparent;
        cursor: pointer;
        margin-right: 20px;
        font-weight: bold;
        display: inline-block;
        padding: 2px 0;
        color: #333;
        width: 120px;
        text-align: center;
        padding: 10px 0;
    }
    .type-list-sel {
        border-bottom: solid 3px #2f65f3;
        color: #2f65f3;
    }
}
</style>
